@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --accent: #15A2B2;
        --accent-dark: #337378; /** link hover color**/
    --accent-light: #cfe9ec;
        --border-size: 2px;
    --border-style: solid; /** can be dotted, dashed, double, solid, hidden, none **/
    --link-border-style: dotted;
    --hr-border-style: dotted;
    --code-background: #e8e8e8;
    --highlight-color: #aee6ec;
    --text: #333;
    --light-background: #fff;
    --dark-background: #181a1b;
    --body-background: #acecf5 url('assets/bg.png') repeat-x bottom;
}


	.darkmode{
		--light-background: #232323;
		--text: #e0e0e0;
        --code-background: #2c2c2c;
        --highlight-color: #1b4347;
        --dark-background: #1d5157;
        --accent-light: #ffffff;
        --main-background: #232323;
        --body-background: #0f2a27 url('assets/night-bg.png') repeat-x bottom;
	}

*, html{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

::selection {
    background: var(--highlight-color);
    color: var(--text);
}

::-moz-selection {
    background: var(--highlight-color);
    color: var(--text);
}

::-webkit-selection {
    background: var(--highlight-color);
    color: var(--text);
}

body{
    background: var(--light-background);
    font: normal 1em/160% 'Poppins', sans-serif;
    color: var(--text);
}

main{
    margin: 0 auto;
    width: 55em;
}

h1{
		color: var(--accent);
    font: normal 3em 'Inconsolata', monospace;
    text-align: center;
    padding: 1em;
    margin: 1em auto 0.5em;
    border-bottom: 2px solid var(--accent);
}

strong, em{
		color: var(--accent);
}

details{
    margin: 1em 0;
}

summary{
    font-size: 120%;
    margin-bottom: 1em;
}

summary:hover, details[open] > summary{
    color: var(--accent);
    font-weight: bold;
}

details[open]{
    border-bottom: var(--border-size) var(--border-style) var(--accent-light);
    padding-bottom: 1em;
    margin-bottom: 3em;
}

question{
    margin: 1em 0 0;
}

#blurb{
    padding: 1em;
}

p{
    padding: 0.5em 0;
}

ul, ol{
    margin: 1em;
}

li{
    padding: 0.25em 0.5em;
}

li::marker{
    color: var(--accent-dark);
}

	a:link,
	a:visited {
		color: var(--accent);
		-webkit-text-decoration-line: var(--link-border-style);
		text-decoration: underline;
		text-decoration-style: var(--link-border-style);
		text-decoration-thickness: var(--border-size);
		text-decoration-color: var(--accent);
		-webkit-text-decoration-color: var(--accent);
	}

	a:hover,
	a:active,
	a:focus {
		color: var(--accent-dark);
		-webkit-text-decoration-line: var(--link-border-style);
		text-decoration: underline;
		text-decoration-style: var(--main-border-style);
		text-decoration-thickness: var(--border-size);
		text-decoration-color: var(--accent-dark);
		-webkit-text-decoration-color: var(--accent-dark);
		box-shadow: inset 0px -10px 0 0px var(--accent-light);
	}

    .darkmode a:link, .darkmode a:visited {
        -webkit-text-decoration-color: var(--accent-light);
        text-decoration-color: var(--accent-light);
    }

    .darkmode a:hover, .darkmode a:active, .darkmode a:focus {
        color: var(--accent-light);
        -webkit-text-decoration-color: var(--accent);
        text-decoration-color: var(--accent);
        box-shadow: inset 0px -10px 0 0px var(--accent-dark);
    }

    code{
        font: normal 1.1em 'Inconsolata', monospace;
        background: var(--code-background);
    }

    aside{
        padding: 1em;
        display: block;
        background: var(--accent-light);
        margin: 1em;
    }

    mark{
        background: var(--highlight-color);
    }

    pre{
        font: normal 90%/160% 'Inconsolata', monospace;
        background: var(--code-background);
        padding: 1em;
        overflow-x: scroll;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
        margin: 1em 0;
    }

    #footer{
        font-size: 0.9em;
        text-align: center;
        text-transform: lowercase;
        padding: 0 1em 1em;
    }

    img{
    max-width: 100%;
}

#theme-switch {
		height: var(--size-quadruple);
  	width: var(--size-quadruple);
		padding: var(--size-quarter);
		border-radius: 50%;
		background-color: var(--fandom-button);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute; /* change to fixed if you want the button to scroll with the page & always be visible */
		top: 20px;
		right: 20px;
		border: none;
	}

	#theme-switch svg {
		fill: var(--accent);
	}

	#theme-switch svg:last-child {
		display: none;
	}

	.darkmode #theme-switch svg:first-child {
		display: none;
	}

	.darkmode #theme-switch svg:last-child {
		display: block;
	}

    summary:hover, details[open] > summary{
		cursor: pointer;
	}